<template>
	<view>
		<!-- <SZqianggou ref="qianggou" @clickItem="checkItem"></SZqianggou> -->
		<view class="xc-w-100p xc-margin-b-10 hy-bg xc-relative" style="width:750rpx;height:528rpx;">
			<u-navbar :isBack="false" back-text="" title="" :background="{background:'rgba(255,255,255,0)'}">
				<u-tabs active-color="#fff" font-size="34" inactive-color="#fff" :bar-width="52" class="xc-w-100p" :list="list"
					style="background:rgba(255,255,255,0);" :is-scroll="false" :current="current" @change="change"></u-tabs>
			</u-navbar>
			<gallery :options="times" v-model="index" />
		</view>
	</view>
</template>
<script>
	// import SZqianggou from '@/components/SZ-qianggou/SZ-qianggou.vue'
	import gallery from '@/lib/components/gallery';
	export default {
		components: {
			// SZqianggou
			gallery
		},
		data() {
			return {
				list: [{
						name: "500元团",
					},
					{
						name: "1000元团",
					},
				],
				times: [{
						value: '8:00',
						label: '未开始'
					},
					{
						value: '9:00',
						label: '未开始'
					},
					{
						value: '10:00',
						label: '未开始'
					},
					{
						value: '11:00',
						label: '未开始'
					},
					{
						value: '12:00',
						label: '未开始'
					},
					{
						value: '13:00',
						label: '未开始'
					},
					{
						value: '14:00',
						label: '未开始'
					},
					{
						value: '15:00',
						label: '未开始'
					},
					{
						value: '16:00',
						label: '未开始'
					},
					{
						value: '17:00',
						label: '未开始'
					},
					{
						value: '18:00',
						label: '未开始'
					},
					{
						value: '19:00',
						label: '未开始'
					},
					{
						value: '20:00',
						label: '未开始'
					},
					{
						value: '21:00',
						label: '未开始'
					},
				],
				index: 5,
				current: 0,
				templateAll:`
				<template>
	<view>
		<!-- <SZqianggou ref="qianggou" @clickItem="checkItem"></SZqianggou> -->
		<view class="xc-w-100p xc-margin-b-10 hy-bg xc-relative" style="width:750rpx;height:528rpx;">
			<u-navbar :isBack="false" back-text="" title="" :background="{background:'rgba(255,255,255,0)'}">
				<u-tabs active-color="#fff" font-size="34" inactive-color="#fff" :bar-width="52" class="xc-w-100p" :list="list"
					style="background:rgba(255,255,255,0);" :is-scroll="false" :current="current" @change="change"></u-tabs>
			</u-navbar>
			<gallery :options="times" v-model="index" />
		</view>
	</view>
</template>
<script>
	// import SZqianggou from '@/components/SZ-qianggou/SZ-qianggou.vue'
	import gallery from '@/lib/components/gallery';
	export default {
		components: {
			// SZqianggou
			gallery
		},
		data() {
			return {
				list: [{
						name: "500元团",
					},
					{
						name: "1000元团",
					},
				],
				times: [{
						value: '8:00',
						label: '未开始'
					},
					{
						value: '9:00',
						label: '未开始'
					},
					{
						value: '10:00',
						label: '未开始'
					},
					{
						value: '11:00',
						label: '未开始'
					},
					{
						value: '12:00',
						label: '未开始'
					},
					{
						value: '13:00',
						label: '未开始'
					},
					{
						value: '14:00',
						label: '未开始'
					},
					{
						value: '15:00',
						label: '未开始'
					},
					{
						value: '16:00',
						label: '未开始'
					},
					{
						value: '17:00',
						label: '未开始'
					},
					{
						value: '18:00',
						label: '未开始'
					},
					{
						value: '19:00',
						label: '未开始'
					},
					{
						value: '20:00',
						label: '未开始'
					},
					{
						value: '21:00',
						label: '未开始'
					},
				],
				index: 5,
				current: 0,
			};
		},
		methods: {
			change(index) {
				this.current = index;
			},
			checkItem(item) {
				uni.showToast({
					title: item.time,
				});
			},
		},
	};
</ script>
<style lang="scss" scoped>
	.user-top {
		background: url() no-repeat center top;
		background-size: 100%;
		height: 260rpx;
	}

	.cu-list.menu>.cu-item .content>uni-text[class*="cuIcon"] {
		font-size: 38rpx;
	}

	.hy-bg {
		background: url(../../static/group/bj.png) no-repeat;
		background-size: 100% 100%;
		width: 750rpx;
		height: 548rpx;
	}

	.item1,
	.item2,
	.item3 {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.item1 {
		height: 180rpx;
		color: #fff;
		font-size: 45rpx;
	}

	.item2 {
		height: 180rpx;
		color: rgba(255, 255, 255, 0.8);
		font-size: 36rpx;
	}

	.item3 {
		height: 180rpx;
		color: rgba(255, 255, 255, 0.5);
		font-size: 29rpx;
	}
</style>
				`
			};
		},
		methods: {
			change(index) {
				this.current = index;
			},
			checkItem(item) {
				uni.showToast({
					title: item.time,
				});
			},
		},
	};
</script>
<style lang="scss" scoped>
	.user-top {
		background: url() no-repeat center top;
		background-size: 100%;
		height: 260rpx;
	}

	.cu-list.menu>.cu-item .content>uni-text[class*="cuIcon"] {
		font-size: 38rpx;
	}

	.hy-bg {
		background: url(../../static/group/bj.png) no-repeat;
		background-size: 100% 100%;
		width: 750rpx;
		height: 548rpx;
	}

	.item1,
	.item2,
	.item3 {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.item1 {
		height: 180rpx;
		color: #fff;
		font-size: 45rpx;
	}

	.item2 {
		height: 180rpx;
		color: rgba(255, 255, 255, 0.8);
		font-size: 36rpx;
	}

	.item3 {
		height: 180rpx;
		color: rgba(255, 255, 255, 0.5);
		font-size: 29rpx;
	}
</style>